---
import { ScrollText, Workflow, FileDownIcon, Code, Link } from 'lucide-react';

interface Props {
  repository?: string;
  language?: string;
}

const { repository, language } = Astro.props;
---

<div class="mx-auto pb-4 w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 border-b border-gray-100 mb-4">
  <span class="text-sm text-black font-semibold group-data-[hover]:text-black/80 capitalize">Repository </span>
  <ul role="list" class="space-y-2 mt-2">
    {
      repository && (
        <li class="has-tooltip rounded-md text-gray-600 group px-1 w-full hover:bg-gradient-to-l hover:from-purple-500 hover:to-purple-700 hover:text-white hover:font-normal  ">
          <a class={`flex items-center space-x-2`} target="_blank" href={repository}>
            <Link className="h-4 w-4 text-gray-800 group-hover:text-white" strokeWidth={1} />
            <span class="font-light text-sm truncate">{repository}</span>
          </a>
        </li>
      )
    }
    {
      language && (
        <li class=" rounded-md text-gray-600 group px-1 w-full  ">
          <div class={`flex items-center space-x-2`}>
            <Code className="h-3 w-3 text-gray-800 " strokeWidth={1} />
            <span class="font-light text-sm truncate">{language}</span>
          </div>
        </li>
      )
    }
  </ul>
  <!-- <div class='border-b border-gray-100'></div> -->
</div>
